<template>
	<view>
		<view class="header">
			<image src="/static/left.png" class="back" @click="back"></image>
			<text class="header_title">坐标</text>
			<text class="header_edit" @click="sure">确定</text>
		</view>

		<map id="maps" style="width: 100%;height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="markers"
			@regionchange="regionChange" show-location='true'>
			<cover-view class="markers">
				<cover-view class="active">当前坐标</cover-view>
				<cover-view class="lat">
					{{parseFloat(markers[0].latitude).toFixed(5)}}/{{parseFloat(markers[0].longitude).toFixed(5)}}
				</cover-view>
			</cover-view>
			<cover-image src="../../../static/center.png"
				style="width: 50rpx;height: 84rpx;position: absolute;left: calc(50% - 24rpx);top: calc(50% - 77rpx);">
			</cover-image>
		</map>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 0,
				longitude: 0,
				markers: [{
					latitude: 36.679505,
					longitude: 117.127613,
					iconPath: '../../../static/center.png',
					heigth: 100,
					width: 50
				}]
			}
		},

		onShow() {
			
		},
		
		onLoad(option) {
			let latandlong = option.latlong.split(",")
			this.latitude = latandlong[1]
			this.longitude = latandlong[0]
			
			if(!option.latlong) {
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.latitude = res.latitude
						that.longitude = res.longitude
					}
				});
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},

			sure() {
				uni.$emit('returnData', parseFloat(this.markers[0].longitude).toFixed(5) + "," + parseFloat(this
					.markers[0].latitude).toFixed(5))
				uni.navigateBack({
					delta: 1
				})
			},

			regionChange(e) {
				// 地图中心点坐标
				this.getCenterLanLat()
			},

			// 获取当前地图中心的经纬度
			getCenterLanLat() {
				var that = this
				this.mapContext = uni.createMapContext("maps", this);

				this.mapContext.getCenterLocation({
					type: 'gcj02',
					success: (res) => {
						let address = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						that.markers[0].longitude = address.longitude;
						that.markers[0].latitude = address.latitude;
						console.log("地址")
						console.log(that.markers)
						that.$emit('longLatDetail', address)
					},
					fail: (err) => {
						console.log(this.latitude)
						console.log('获取当前地图中心的经纬度2', err);
					}
				})
			},
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.header {
		height: 88rpx;
		padding-left: 12px;
		padding-right: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 88rpx;
		background-color: white;
	}

	.back {
		width: 23px;
		height: 23px;
	}

	.header_title {
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
		flex: 1;
		text-align: center;
	}

	.header_edit {
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #1677FF;
		line-height: 48rpx;
	}

	.markers {
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 12rpx 27rpx -7rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		margin: 28rpx 24rpx 0rpx 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.active {
		font-size: 30rpx;
		font-family: MicrosoftYaHei;
		color: #9A9A9A;
		line-height: 42rpx;
		margin-left: 24rpx;
	}

	.lat {
		font-size: 30rpx;
		font-family: Regular;
		color: #333333;
		line-height: 42rpx;
		margin-right: 24rpx;
		flex: 1;
		text-align: right;
	}
</style>
